<template>
    <div class="repair">
        <div class="my-header"></div>
        <van-form show-error scroll-to-error label-width="27vw" @submit="onSubmit" @failed="onFailed">
            <div class="form-box">
                <van-field readonly label="评价" left-icon="coupon" center />
                <!-- <van-field readonly label="服务态度" required center /> -->

                <FieldPopupPicker
                    v-model:field="formData.sh_ex101"
                    required
                    name="sh_ex101"
                    label="服务态度"
                    :columns="columns1"
                    :readonly="isReadonly"
                />
                <FieldPopupPicker
                    v-model:field="formData.sh_ex102"
                    required
                    name="sh_ex102"
                    label="办事效率"
                    :columns="columns1"
                    :readonly="isReadonly"
                />
                <FieldPopupPicker
                    v-model:field="formData.sh_ex103"
                    required
                    name="sh_ex103"
                    label="廉洁自律"
                    :columns="columns1"
                    :readonly="isReadonly"
                />
                <FieldPopupPicker
                    :field="formData.sh_ex104"
                    @update:field="sh_ex104Change"
                    required
                    name="sh_ex104"
                    label="工作人员有无收受现金（红包）、礼物、礼品或接受吃请？"
                    :columns="columns2"
                    :readonly="isReadonly"
                />

                <van-field
                    v-if="formData.sh_ex104 == '有'"
                    v-model="formData.sh_ex105"
                    type="textarea"
                    rows="1"
                    autosize
                    center
                    name="sh_ex105"
                    label="请您列明哪一位同志在哪个环节收受现金（红包）、礼物、礼品的具体金额、数量或接受吃请的时间、地点。"
                    placeholder="请您列明哪一位同志在哪个环节收受现金（红包）、礼物、礼品的具体金额、数量或接受吃请的时间、地点。"
                />
                <van-field
                    v-model="formData.sh_ex106"
                    required
                    type="textarea"
                    rows="1"
                    autosize
                    center
                    name="sh_ex106"
                    label="其他意见和建议"
                    placeholder="其他意见和建议"
                    :rules="[{ required: true, message: '请输入其他意见和建议' }]"
                />

                <van-field
                    v-model="formData.sh_ex107"
                    center
                    name="sh_ex107"
                    label="评价人姓名"
                    placeholder="评价人姓名"
                />
                <van-field
                    v-model="formData.sh_ex108"
                    type="digit"
                    center
                    name="sh_ex108"
                    label="联系号码"
                    placeholder="联系号码"
                />
            </div>
            <FixedButton native-type="submit">提交</FixedButton>
        </van-form>
    </div>
</template>

<script lang="ts" setup>
    import type { Ref, Raw } from 'vue';
    import { useRouter, useRoute } from 'vue-router';
    import { useStore } from '@/store';
    import FixedButton from '@/components/fixedButton/FixedButton.vue';
    import FieldPopupPicker from '@/components/fieldPopupPicker/FieldPopupPicker.vue';
    import {} from '@/apis';
    import { isPhone, compressImg, isCardID, getSex, getAge } from '@/utils';

    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const isReadonly: boolean = route.query?.sh_id ? true : false;
    const columns1: Ref<any[]> = ref([
        { text: '非常满意', value: '非常满意' },
        { text: '满意', value: '满意' },
        { text: '一般', value: '一般' },
        { text: '差', value: '差' },
    ]);
    const columns2: Ref<any[]> = ref([
        { text: '有', value: '有' },
        { text: '无', value: '无' },
    ]);

    const formData: Ref<any> = ref({
        sh_ex101: '',
        sh_ex102: '',
        sh_ex103: '',
        sh_ex104: '',
        sh_ex105: '',
        sh_ex106: '',
        sh_ex107: '',
        sh_ex108: '',
    });

    onBeforeMount(async () => {});
    const sh_ex104Change = (val) => {
        console.log(val);
        formData.value.sh_ex104 = val;
        if (formData.value.sh_ex104 == '无') {
            formData.value.sh_ex105 = '';
        }
    };
    const onFailed = (value) => {
        showDialog({
            teleport: '.repair',
            title: '提示',
            message: value.errors[0].message,
        });
    };
    const onSubmit = async (value) => {
        showLoadingToast({
            message: '加载中...',
            forbidClick: true,
            duration: 0,
        });

        // let mydata = JSON.parse(JSON.stringify(formData.value));
        saveReserveInfoApi({
            data: JSON.stringify(mydata),
        })
            .then((res) => {
                closeToast();
                if (res[0].status == '+OK') {
                    showDialog({
                        teleport: '.repair',
                        title: '提示',
                        message: res[0].msg,
                    }).then(() => {
                        router.push('/');
                    });
                } else {
                    showDialog({
                        teleport: '.repair',
                        title: '提示',
                        message: res[0].msg,
                    });
                }
            })
            .catch((err) => {
                closeToast();
                showDialog({
                    teleport: '.repair',
                    title: '提示',
                    message: '网络异常，请稍后重试！',
                });
            });
    };
</script>
<style lang="scss" scoped>
    .repair {
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background-image: url('@/assets/img/bg/bg10.png');
        background-size: 100% 100%;
    }
    .my-header {
        display: flex;
        justify-content: center;
        background: url(@/assets/img/policy/policybg.png) no-repeat;
        background-size: 100% 90%;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .my-header::after {
        content: '';
        width: 95%;
        height: 185px;
        margin-top: 20px;
        background: url(@/assets/img/banner/gmjs_bg18.png);
        background-size: 100% 100%;
        border-radius: 5px;
    }
    :deep(.van-form) {
        // height: 550px;
        // height: 510px;
        flex: 1;
        overflow: scroll;
        box-sizing: border-box;
    }
    .form-box {
        border-radius: 10px;
        background-color: #fff;
        box-sizing: border-box;
        padding: 4px;
        margin: 10px 0;
    }
    .uploader-box {
        border-bottom: 1px solid #999999;
        margin: 6px 15px;
        box-sizing: border-box;
        padding: 0px 0;
        height: 180px;
        overflow: hidden;
        img {
            // width: 345px;
            width: 325px;
            height: 180px;
        }
        // 上传图片后图片大小
        :deep(.van-uploader__preview-image) {
            // width: 345px;
            width: 325px;
            height: 180px;
        }
    }
    .uploader-box-2 {
        img {
            width: 80px;
            height: 80px;
        }
    }
    .appointment-time-quantum {
        height: 300px;
        overflow: scroll;
        @include padding-global;
        padding-top: 20px;
        padding-bottom: 20px;
        .appointment-time-quantum-tips {
            font-size: 14px;
            color: red;
            text-align: left;
        }
        .appointment-time-quantum-tip2 {
            padding-top: 10px;
        }
        .appointment-time-quantum-box {
            padding-top: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .appointment-time-quantum-item {
            margin-top: 10px;
            height: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 150px;
            border: 1px solid rgb(111, 185, 235);
            font-size: 14px;
        }
    }
    #container,
    #mapDiv {
        width: 0%;
        height: 0%;
    }
    // dialog弹框ui
    :deep(.van-popup.van-popup--center.van-dialog) {
        background-color: none;
        background-image: url('@/assets/img/bg/bg10.png');
        background-size: 100% 100%;
    }
    :deep(.van-hairline--top.van-dialog__footer button) {
        background: none;
    }
</style>
